<template>
	<div class="device-archive">
		<el-card>
			<div class="toolbar">
				<el-input v-model="keyword" placeholder="搜索设备编号/名称/厂家" clearable style="width:220px" />
				<el-button type="primary" @click="openDialog()">新增设备</el-button>
			</div>
			<el-table :data="filteredData" border size="small">
				<el-table-column prop="code" label="设备编号" width="80" />
				<el-table-column prop="name" label="设备名称" width="80" />
				<el-table-column prop="model" label="型号" width="80" />
				<el-table-column prop="type" label="类型" width="80" />
				<el-table-column prop="line" label="所属产线" width="110" />
				<el-table-column prop="startDate" label="投用日期" width="110" />
				<el-table-column prop="status" label="状态" width="90">
					<template #default="scope">
						<el-tag
							:type="scope.row.status === '运行' ? 'success' : (scope.row.status === '维护' ? 'warning' : 'info')">
							{{ scope.row.status }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="manufacturer" label="厂家" width="120" />
				<el-table-column prop="remark" label="备注" />
				<el-table-column label="操作" width="130">
					<template #default="scope">
						<el-button size="small" @click="openDialog(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeRow(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 新增/编辑弹窗 -->
		<el-dialog v-model="dialog.visible" :title="dialog.editIndex >= 0 ? '编辑设备' : '新增设备'" width="430px">
			<el-form :model="dialog.data" label-width="90px">
				<el-form-item label="设备编号">
					<el-input v-model="dialog.data.code" />
				</el-form-item>
				<el-form-item label="设备名称">
					<el-input v-model="dialog.data.name" />
				</el-form-item>
				<el-form-item label="型号">
					<el-input v-model="dialog.data.model" />
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="dialog.data.type" placeholder="请选择类型">
						<el-option label="投料设备" value="投料设备" />
						<el-option label="混合设备" value="混合设备" />
						<el-option label="制粒设备" value="制粒设备" />
						<el-option label="压片设备" value="压片设备" />
						<el-option label="灌装设备" value="灌装设备" />
						<el-option label="包装设备" value="包装设备" />
						<el-option label="检测设备" value="检测设备" />
						<el-option label="辅助设备" value="辅助设备" />
					</el-select>
				</el-form-item>
				<el-form-item label="所属产线">
					<el-input v-model="dialog.data.line" />
				</el-form-item>
				<el-form-item label="投用日期">
					<el-date-picker v-model="dialog.data.startDate" type="date" value-format="YYYY-MM-DD"
						placeholder="选择日期" />
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="dialog.data.status" placeholder="请选择状态">
						<el-option label="运行" value="运行" />
						<el-option label="维护" value="维护" />
						<el-option label="停用" value="停用" />
					</el-select>
				</el-form-item>
				<el-form-item label="厂家">
					<el-input v-model="dialog.data.manufacturer" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="dialog.data.remark" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialog.visible = false">取消</el-button>
				<el-button type="primary" @click="saveRow">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

// 15条典型医药设备模拟数据
const tableData = ref([
	{ code: 'DEV-10001', name: '投料机A', model: 'TLJ-500', type: '投料设备', line: '固体制剂线', startDate: '2023-06-11', status: '运行', manufacturer: '北京星辰', remark: '自动加料' },
	{ code: 'DEV-10002', name: '混合机B', model: 'HHJ-300', type: '混合设备', line: '固体制剂线', startDate: '2022-12-03', status: '运行', manufacturer: '上海万盛', remark: '' },
	{ code: 'DEV-10003', name: '制粒机C', model: 'ZLJ-650', type: '制粒设备', line: '固体制剂线', startDate: '2023-05-21', status: '运行', manufacturer: '无锡南光', remark: '' },
	{ code: 'DEV-10004', name: '压片机D', model: 'YPJ-120', type: '压片设备', line: '固体制剂线', startDate: '2022-08-16', status: '维护', manufacturer: '长春工控', remark: '主轴更换' },
	{ code: 'DEV-10005', name: '包装机E', model: 'BJJ-210', type: '包装设备', line: '固体制剂线', startDate: '2023-01-06', status: '运行', manufacturer: '南京新星', remark: '' },
	{ code: 'DEV-10006', name: '检测仪F', model: 'JCY-70', type: '检测设备', line: '固体制剂线', startDate: '2023-04-28', status: '运行', manufacturer: '济南品控', remark: '在线检测' },
	{ code: 'DEV-10007', name: '灌装机G', model: 'GZJ-55', type: '灌装设备', line: '注射剂线', startDate: '2022-10-20', status: '运行', manufacturer: '浙江正康', remark: '' },
	{ code: 'DEV-10008', name: '贴标机H', model: 'TBJ-100', type: '包装设备', line: '注射剂线', startDate: '2023-03-11', status: '运行', manufacturer: '深圳智工', remark: '' },
	{ code: 'DEV-10009', name: '旋盖机I', model: 'XGJ-80', type: '包装设备', line: '注射剂线', startDate: '2022-07-29', status: '维护', manufacturer: '上海固化', remark: '' },
	{ code: 'DEV-10010', name: '灯检机J', model: 'DJJ-200', type: '检测设备', line: '注射剂线', startDate: '2023-01-19', status: '运行', manufacturer: '无锡光明', remark: '异物检测' },
	{ code: 'DEV-10011', name: '输送带K', model: 'SSD-40', type: '辅助设备', line: '固体制剂线', startDate: '2023-02-07', status: '运行', manufacturer: '杭州顺达', remark: '' },
	{ code: 'DEV-10012', name: '制水机L', model: 'ZWJ-5T', type: '辅助设备', line: '注射剂线', startDate: '2022-11-13', status: '停用', manufacturer: '苏州水工', remark: '' },
	{ code: 'DEV-10013', name: '混合机M', model: 'HHJ-200', type: '混合设备', line: '原料前处理线', startDate: '2023-03-25', status: '运行', manufacturer: '上海万盛', remark: '' },
	{ code: 'DEV-10014', name: '封口机N', model: 'FJJ-120', type: '包装设备', line: '原料前处理线', startDate: '2022-12-17', status: '维护', manufacturer: '南京新星', remark: '' },
	{ code: 'DEV-10015', name: '空压机O', model: 'KYJ-15', type: '辅助设备', line: '注射剂线', startDate: '2023-04-10', status: '运行', manufacturer: '重庆重工', remark: '' }
])

const keyword = ref('')
const filteredData = computed(() => {
	if (!keyword.value) return tableData.value
	return tableData.value.filter(
		d => d.code.includes(keyword.value) || d.name.includes(keyword.value) || d.manufacturer.includes(keyword.value)
	)
})

// 新增/编辑弹窗
const dialog = reactive({
	visible: false,
	data: { code: '', name: '', model: '', type: '', line: '', startDate: '', status: '', manufacturer: '', remark: '' },
	editIndex: -1
})

function openDialog(row) {
	if (row) {
		dialog.data = { ...row }
		dialog.editIndex = tableData.value.findIndex(d => d.code === row.code)
	} else {
		dialog.data = { code: '', name: '', model: '', type: '', line: '', startDate: '', status: '', manufacturer: '', remark: '' }
		dialog.editIndex = -1
	}
	dialog.visible = true
}

function saveRow() {
	if (dialog.editIndex >= 0) {
		tableData.value[dialog.editIndex] = { ...dialog.data }
	} else {
		tableData.value.unshift({ ...dialog.data })
	}
	dialog.visible = false
}

function removeRow(idx) {
	tableData.value.splice(idx, 1)
}
</script>

<style scoped>
.device-archive {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
</style>
  
